<template>
	<view class="">
		<view class="gameBox">
			<view class="flex flex-jcsb flex-aic" v-if='!isRead'>
				<view class=""></view>
				<view class="right"><image class="score" src="../../static/images/score.png" mode=""></image> {{score}}</view>
			</view>
			
			<view class="tac" v-if="isRead">
				<view :class="[className,'imgBox','mauto']" :style='{"transform" : mirrorImage ? "rotateY(180deg)":"rotate(0deg)"}'></view>
			</view>
			
			<view class="flex flex-jcsa mt60" v-else>
				<template v-if="issingle">
						<image class="bubble" v-show="isLeft"  src="../../static/images/bubble-B.svg"
							@click="leftTap" mode=""></image>
						<image class="bubble1" v-show="!isLeft" src="../../static/images/bubble-B-break.svg" mode=""></image>
						<image class="bubble" v-show="isRight"  src="../../static/images/bubble-R.svg"
							@click="rightTap" mode=""></image>
						<image class="bubble1" v-show="!isRight" src="../../static/images/bubble-R-break.svg" mode=""></image>
				</template>
				<template v-else>
					<image class="bubble"  v-show="isCenter" :src="'../../static/images/'+centerImg"	@touchstart="startTap" @touchend="endTap" mode=""></image>
					<!-- <image class="bubble"  v-show="isCenter&&isBreak" :src="'../../static/images/bubble-B.svg'"	@touchstart="startTap" @touchend="endTap" mode=""></image> -->
					<!-- <image class="bubble"  v-show="isCenter&&!isBreak" :src="'../../static/images/bubble-B-break.svg'"	@touchstart="startTap" @touchend="endTap" mode=""></image> -->
					<image class="bubble1" v-show="!isCenter" src="../../static/images/bubble-B-break.svg" mode=""></image>
				</template>
			</view>
			<view class="tac fwb mt40">{{introduction}}</view>
		</view>
		<view class="btn mt60" @click="readyTap"  v-if='isRead' >我准备好了</view>
		<view class="flex flex-jcsa" v-if="isNext">
			<view class="btn mt60" @click="again" >重新测试</view>
			<view class="btn mt60" @click="next" >{{last?'完成':'下一项'}}</view>
		</view>
	</view>
</template>

<script>
	import Audio from '../../core/audio.js'
	export default {
		name: "",
		data() {
			return {
				isRead:true,
				isNext:false,
				score: 0,
				isLeft: false,
				isRight: false,
				isCenter:true,
				isBreak:true,
				centerImg:'bubble-B.svg',
				startTime: 0,
				dataArr: [],
				className:"",
			}
		},
		props: {
			introduction:{
				type:String,
				default:""
			},
			issingle:{
				type:Boolean,
				default:true,
			},
			sindex:{
				type:Number,
			},
			last:{
				type:Boolean,
			},
			mirrorImage: {
				type: Boolean,
				default: false
			},
		},
		created(){
			if(!this.issingle){
				this.className = 'S-1-1';
				this.timer =setInterval(()=>{
					if(this.className == 'S-1-1'){
						this.className = 'S-1-2';
					}else{
						this.className = 'S-1-1';
					}
				},500)
			}else{
				this.className = 'D-1-1';
				this.timer =setInterval(()=>{
					if(this.className == 'D-1-1'){
						this.className = 'D-1-2';
					}else if(this.className == 'D-1-2'){
						this.className = 'D-1-3';
					}else if(this.className == 'D-1-3'){
						this.className = 'D-1-4';
					}else if(this.className == 'D-1-4'){
						this.className = 'D-1-1';
					}
				},500)
			}
		},
		methods: {
			// 从新测试
			again(){
				this.score = 0;
				this.dataArr = [];
				this.isNext = false;
				this.isRead  = true;
				this.isCenter = true;
				this.isRight = true;
			},
			
			// 准备好了
			readyTap() {
				clearInterval(this.timer);
				Audio.audioCtx.stop();
				this.isLeft = true;
				this.isRight = true;
				this.startTime = new Date().getTime();
				this.isRead  =false;
				let timer = setInterval(()=>{
					this.isLeft = false;
					this.isRight = false;
					this.isNext = true;
					this.isCenter = false;
					clearInterval(timer)
				},20000)
			},
			startTap(){
				this.centerImg = 'bubble-B-break.svg';
				this.timer = setTimeout(()=>{
					this.centerImg = 'bubble-B.svg';
				},500)
				this.isBreak = false;
				this.score++;
				let difference = ((new Date().getTime() - this.startTime) / 1000).toFixed(1);
				this.dataArr.push(difference);
				this.startTime = new Date().getTime();
			},
			endTap(){
				clearTimeout(this.timer)
				this.isBreak = true;
				this.centerImg = 'bubble-B.svg';
			},
			
			// 点击左边
			leftTap() {
				if (this.isLeft) {
					this.score++;
					let difference = ((new Date().getTime() - this.startTime) / 1000).toFixed(1);
					this.dataArr.push(difference);
					this.isLeft = false;
					this.isRight = true;
					this.startTime = new Date().getTime();
				}
			},
			// 点击右边
			rightTap() {
				if (this.isRight) {
					this.score++;
					let difference = ((new Date().getTime() - this.startTime) / 1000).toFixed(1);
					this.dataArr.push(difference);
					this.isLeft = true;
					this.isRight =false;
					this.startTime = new Date().getTime();
				}
			},
			next(){
				this.$emit('changeindex',{sindex:this.sindex+1,data:this.dataArr})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right{
		width: 96rpx;
		height: 82rpx;
		line-height: 96rpx;
		text-align: center;
		position: relative;
	}
	.score{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.gameBox{
		width: 80%;
		height: auto;
		padding: 30rpx;
		border-radius: 16rpx;
		background-color: #f5f5f5;
		margin: 100rpx auto  140rpx;
	}
	.btn{
		width: 200rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: #a61b32;
		margin: 0 auto;
	}
	.bubble1,
	.bubble {
		width: 160rpx;
		height: 160rpx;
	}
	.imgBox {
		// width: 400rpx;
		height: 550rpx;
	}
	.S-1-1{
		background-image: url();
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	
	.S-1-2{
		background-image: url();
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.D-1-1{
		background-image: url();
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.D-1-2{
		background-image: url();		
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.D-1-3{
		background-image: url();
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.D-1-4{
		background-image: url();		
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	
	
	
</style>
